// spacing
$spacingPrefixArr: (
  (prefix:'pt', attr:'padding-top'),
  (prefix:'pr', attr:'padding-right'),
  (prefix:'pb', attr:'padding-bottom'),
  (prefix:'pl', attr:'padding-left'),
  (prefix:'pd-tb', attr:('padding-top', 'padding-bottom')),
  (prefix:'pd-lr', attr:('padding-left', 'padding-right')),
  (prefix:'pd', attr:('padding')),
  (prefix:'mt', attr:'margin-top'),
  (prefix:'mr', attr:'margin-right'),
  (prefix:'mb', attr:'margin-bottom'),
  (prefix:'ml', attr:'margin-left'),
  (prefix:'mg-tb', attr:('margin-top', 'margin-bottom')),
  (prefix:'mg-lr', attr:('margin-left', 'margin-right')),
  (prefix:'mg', attr:('margin')),
);

@each $item in $spacingPrefixArr {
  $prefix: map-get($map: $item, $key: prefix);
  $attr: map-get($map: $item, $key: attr);

  @for $size from 2 through 100 {
    @if $size%2==0 {
      .#{$prefix}-#{$size} {
        @each $attrItem in $attr {
          #{$attrItem}: #{$size}px;
        }
      }
    }
  }
}

@for $size from 2 through 64 {
  @if $size%2==0 {
    .gap-#{$size} {
      gap: #{$size}px;
    }
  }
}